<template>
    <div class="recommend-container">
        <div class="recommend-title">人气推荐</div>
        <div class="recommend-list-container">
        <div class="list-goods" v-for="item in recommendList" :key="item.id" @click="goRecommendDetail(item.id)">
          <img :src="item.pic "/>
          <p class="p1">{{item.name}}</p>
          <p class="p2">{{item.minPrice}}</p>
        </div>
        </div>
    </div>   
</template>

<script>
export default {
    props:{
        recommendList:{
            type:Array,
            required:true,
        }
    },
    methods:{
        goRecommendDetail(id){
            this.$router.push({path:"/recommendDetail",
            query:{id:id}})
        }
    }
}
</script>

<style scoped>
.recommend-container{
    width:100%;
    height:100vh;
    /* background-color: lightseagreen; */
}
.recommend-title {
  height: 1.6rem;
  width: 100%;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: white;
}
.recommend-list-container{
    width:100%;
    height:100%;
    display: inline-flex;
    justify-content:space-around;
    align-items: center;
    flex-wrap: wrap;
}
.list-goods{
    width:48%;
    height:12rem;
    margin-top:5px;
}
.list-goods img{
    width:100%;
    height:85%;
}
.p1{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:1;
  overflow: hidden;
  font-size:0.5rem;
}
.p2{
  font-size: 0.3rem;
  color:red;
}
</style>